<template>
  <div class="home">
	<Header title="豆瓣音乐" :left-arrow="false" leftText="设置" @onLeftTextClick="goSettings"/>
	<Swipper v-if="data.swipperList" :dataList="data.swipperList" class="swipper"/>
	
	<template  v-if="data.movieSectionList">
	  <MusicList v-for="( item, index ) in data.movieSectionList" 
	                :movieList="item"
	                :key = "index"
	                :movieType="index">
	  </MusicList>
	</template>
  </div>
</template>

<script>
import Header from '@/components/Header'
import MusicList from '@/components/MusicList'
import Swipper from '@/components/Swipper.vue'
import {reactive} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from "vue-router";

import {fetchMusicListByAuthor} from "@/api/music.js"

export default {
  name: 'Home',
  components: {
    Header,
	MusicList,
	Swipper
  },
  setup(){
	  const data = reactive({
	    swipperList: [
			"http://localhost:3000/images/syz.jpeg",
			"http://localhost:3000/images/zjl.jpeg",
			"http://localhost:3000/images/she.jpeg"
		],
	    movieSectionList : []
	  });
	  
	  const router = useRouter()
	  const store = useStore()
	  
	  const categoryList = store.state.categoryList
	  const promiseList = categoryList.map(function (singerName) {
	    return getMusicListByAuthor(singerName)
	  })
	  //同步等待上面的结果都返回,然后再给state赋值
	  Promise.all(promiseList).then((res) => {
	    for (let index = 0 ; index < categoryList.length; index++){
		  console.log(res);
	      data.movieSectionList.push(res[index])
	    }
	  }).catch((error) => {
	    console.log(error)
	  })
	  
	  
	  function goSettings(){
	    router.push('/settings');
	  }
	  
	  return {data, goSettings}
  }
}
async function getMusicListByAuthor(singerName){
		let movies = []
		await fetchMusicListByAuthor(singerName, {
			count:8
		}).then(
			function (res){
				movies = res;
			}
		)
		return movies
}
</script>
<style scoped="">

</style>
